<template>
  <div class="box">
    <el-card>
      <div class="title">云阳县社会组织数字化监管改革情况统计表</div>
      <!--<el-button @click="generateLedgers" class="derived">-->
      <!--  <template #icon>-->
      <!--    <img-->
      <!--      src="@/assets/imgs/spotCheck/icon/c2.svg"-->
      <!--      alt="icon"-->
      <!--      class="btn-icon"-->
      <!--    />-->
      <!--  </template>-->
      <!--  生成台账-->
      <!--</el-button>-->
      <!--<MForm :fields="fields" @submit="search" @cancel="search"> </MForm>-->
      <el-row>
        <el-col :span="24" style="line-height: 40px; margin-bottom: 5px">
          <!--          年份：-->
          <el-date-picker
            v-model="params.year"
            style="width: 200px"
            value-format="YYYY"
            type="year"
            placeholder="请选择年份"
            @change="search"
          >
          </el-date-picker>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="warning" plain @click="generateLedgers">导出</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%"
        :stripe="true"
        size="large"
        table-layout="fixed"
        height="calc(100vh - 250px)"
      >
        <el-table-column
          label="序号"
          width="80"
          align="center"
          prop="serialNumber"
        ></el-table-column>
        <el-table-column
          prop="globalCount"
          label="业务主管单位（行业管理部门）"
          width="240"
          align="center"
        ></el-table-column>
        <el-table-column label="登记社会组织数量" align="center">
          <el-table-column
            prop="allNum"
            label="合计"
            align="center"
            width="80"
          />
          <el-table-column
            prop="normal"
            label="在册社会组织总数"
            align="center"
            width="100"
          />
          <el-table-column
            prop="normalST"
            label="其中在册社会团体数量"
            align="center"
            width="110"
          />
          <el-table-column
            prop="normalMF"
            label="其中在册民办非企业单位数量"
            align="center"
            width="120"
          />
          <el-table-column
            prop="logout"
            label="注销数量"
            align="center"
            width="90"
          />
          <el-table-column
            prop="cancel"
            label="撤销数量"
            align="center"
            width="90"
          />
        </el-table-column>
        <el-table-column label="风险信息处置" align="center">
          <el-table-column
            prop="riskNum"
            label="风险预警信息数量"
            align="center"
            width="90"
          />
          <el-table-column
            prop="one"
            label="其中1级风险信息个数"
            align="center"
            width="110"
          />
          <el-table-column
            prop="two"
            label="其中2级风险信息个数"
            align="center"
            width="110"
          />
          <el-table-column
            prop="three"
            label="其中3级风险信息个数"
            align="center"
            width="110"
          />
          <el-table-column
            prop="comp"
            label="已经完成整改个数"
            align="center"
            width="100"
          />
          <el-table-column
            prop="notComp"
            label="未完成整改个数"
            align="center"
            width="100"
          />
          <el-table-column
            prop="riskRate"
            label="整改完成率"
            align="center"
            width="80"
          />
          <!--<el-table-column-->
          <!--  prop="2"-->
          <!--  label="按时整改个数"-->
          <!--  align="center"-->
          <!--  width="120"-->
          <!--/>-->
          <!--<el-table-column-->
          <!--  prop="2"-->
          <!--  label="未按时整改个数"-->
          <!--  align="center"-->
          <!--  width="140"-->
          <!--/>-->
          <!--<el-table-column-->
          <!--  prop="2"-->
          <!--  label="按时整改率"-->
          <!--  align="center"-->
          <!--  width="120"-->
          <!--/>-->
        </el-table-column>
        <el-table-column label="抽查检查">
          <el-table-column
            prop="spotNum"
            label="抽查检查个数"
            align="center"
            width="80"
          />
          <el-table-column
            prop="spcbl"
            label="抽查检查比例"
            align="center"
            width="80"
          />
          <el-table-column
            prop="problemNum"
            label="抽查检查发现问题数量"
            align="center"
            width="110"
          />
          <el-table-column
            prop="spcomp"
            label="完成整改问题数量"
            align="center"
            width="100"
          />
          <el-table-column
            prop="soptRate"
            label="完成整改率"
            align="center"
            width="80"
          />
        </el-table-column>
        <el-table-column label="社会组织风险处置">
          <el-table-column
            prop="handleNum"
            label="有风险社会组织数量"
            align="center"
            width="110"
          />
          <el-table-column
            prop="hdone"
            label="其中低风险数量"
            align="center"
            width="100"
          />
          <el-table-column
            prop="hdtwo"
            label="其中中风险数量"
            align="center"
            width="100"
          />
          <el-table-column
            prop="hdthree"
            label="其中高风险数量"
            align="center"
            width="100"
          />
          <el-table-column
            prop="hdcomp"
            label="完成风险社会组织处置数量"
            align="center"
            width="120"
          />
          <el-table-column
            prop="hcnum"
            label="其中按时完成风险社会组织处置数量"
            width="160"
            align="center"
          />
          <el-table-column
            prop="hcRate"
            label="按时完成率"
            align="center"
            width="80"
          />
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import {
  statisticsLedger,
  statisticsList
} from '@/api/systemSetting/statistics'
import { onMounted, ref } from 'vue'

onMounted(() => {
  init()
})

const fields = ref([
  {
    key: 'year',
    label: '年份',
    tag: 'el-date-picker',
    attrs: {
      type: 'year',
      valueFormat: 'YYYY'
    }
  }
])

const params = ref({
  year: undefined
})
const search = () => {
  init()
}

const tableData = ref([])

const init = () => {
  statisticsList(params.value).then((res) => {
    tableData.value = res.data.map((i, index) => ({
      ...i,
      serialNumber: index + 1
    }))
  })
}

//生成台账
const generateLedgers = () => {
  statisticsLedger(params.value).then((res) => {
    const blob = new Blob([res], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    })
    const a = document.createElement('a')
    const URL = window.URL || window.webkitURL
    const herf = URL.createObjectURL(blob)
    a.href = herf
    a.download = '台账.xlsx'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(herf)
  })
}
</script>

<style scoped lang="scss">
.title {
  font-size: 30px;
  text-align: center;
  padding: 0 0 30px 0;
}
.box {
  position: relative;
}
.derived {
  position: absolute;
  right: 20px;
  top: 20px;
}
</style>
